<script setup>
import {onMounted, ref} from "vue";
import qs, {parse} from "qs";
import {ElMessage} from "element-plus";
import axiosInstance from "@/http";
import axios from "@/http";

const searchAttendanceForm = ref({
    username: '',
    attendanceDate: '',
    checkStatus: '',
})
const attendanceList = ref([])
const loadAttendance = () => {
    // 请求数据
    console.log(searchAttendanceForm.value)
    let data = qs.stringify(searchAttendanceForm.value);
    axiosInstance.get('/oa/attendance/list?' + data).then((response) =>{
        if(response.data.code === 20000){
            attendanceList.value = response.data.data;
            console.log(attendanceList.value);
            attendance();
        }else {
            ElMessage.error(response.data.msg);
        }
    })
}
const resetSearch = ()=>{
    //清空之前写的搜索条件
    searchAttendanceForm.value = {};
    //重新加载
    loadAttendance();
}

onMounted(()=>{
    loadAttendance();
})

const attendance = () => {
  axios.get('/oa/asset/attendance/addNum').then((response)=>{
  })
}
</script>


<template>
    <div class="user-management">
        <header class="header">
            <span class="title">每日考勤</span>
        </header>

        <!--    搜索卡片-->
        <el-card class="search-card">
            <el-form :inline="true">
                <el-form-item label="员工搜索">
                    <el-input
                            placeholder="请输入员工性名"
                            v-model="searchAttendanceForm.username" @keydown.enter="loadAttendance"
                    ></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                            placeholder="请选择"
                            type="date"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            v-model="searchAttendanceForm.attendanceDate"
                            @change="loadAttendance"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="考勤状态" style="width: 290px;">
                    <el-select placeholder="请选择"
                               v-model="searchAttendanceForm.checkStatus" @change="loadAttendance">
                        <el-option label="正常" value="Normal"></el-option>
                        <el-option label="迟到" value="Late"></el-option>
                        <el-option label="早退" value="Early"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetSearch">重置</el-button>
                    <el-button @click="loadAttendance">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card>
            <el-table :data="attendanceList" class="user-table">
                <el-table-column type="index" label="编号" width="80" align="center"/>
                <el-table-column prop="username" label="用户名" align="center"/>
                <el-table-column prop="checkType" label="打卡类型" align="center">
                    <template #default="scope">
                        {{ scope.row.checkType === 'OnDuty' ? '上班打卡' : '下班打卡' }}
                    </template>
                </el-table-column>
                <el-table-column prop="attendanceDate" label="打卡日期" align="center"/>
                <el-table-column prop="checkTime" label="打卡时间" align="center"/>
                <el-table-column prop="checkStatus" label="打卡状态" align="center">
                    <template #default="scope">
                        {{ scope.row.checkStatus === 'Normal' ? '正常' : scope.row.checkStatus === 'Late' ? '迟到' : '早退' }}
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<style scoped>
.user-management {
    padding: 20px;
    background-color: #f5f7fa;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.user-dialog {
    width: 800px;
    padding: 30px;
}

.dialog-form {
    max-width: 600px;
}

.search-card {
    margin: 20px 0;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-input {
    width: 200px;
}

.user-table {
    border-radius: 5px;
    overflow: hidden;
}

.user-table .el-table th {
    background-color: #eaeaea;
}

.reset-button {
    margin-right: 10px;
}
</style>